<template>
  <div class="header">

    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
    >
      <el-form-item label="用户名">
        <el-input v-model="formInline.username" placeholder="用户名"/>
      </el-form-item>
      <el-form-item label="别名">
        <el-input v-model="formInline.nickname" placeholder="别名"/>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="formInline.email" placeholder="邮箱"/>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
            v-model="startTime"
            type="datetime"
            placeholder="选择开始时间"
            format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
            v-model="endTime"
            type="datetime"
            placeholder="选择结束时间"
            format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
        <el-button
            :icon="Search"
            type="primary"
            @click="queryPageUserList"
        >
          搜索
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
            :icon="Delete"
            type="warning"
            @click="clearFormLine"
        >
          清空
        </el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-table :data="tableData" border stripe height="450">
    <el-table-column prop="nickname" label="别名" width="100" />
    <el-table-column prop="email" label="邮箱" width="170"/>
    <el-table-column prop="avatar" label="头像" width="100">
      <template #default="scope">
        <img :src="scope.row.avatar" width="80" height="80">
      </template>
    </el-table-column>
    <el-table-column prop="description" label="简介" width="180"/>
    <el-table-column prop="fanNum" label="粉丝数" width="80"/>
    <el-table-column prop="articleNum" label="文章数" width="80"/>
    <el-table-column prop="postNum" label="帖子数" width="80"/>
    <el-table-column prop="ipAddress" label="IP地址" width="130" />
    <el-table-column prop="tagList" label="兴趣标签" width="200">
      <template #default="scope">
        <el-tag
            v-for="tag in scope.row.tagList"
            type="success"
            :key="tag.id"
            style="margin-left: 3px"
        >
          {{ tag.name }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="加入时间" width="180" />
  </el-table>
  <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px"
  />
</template>

<script setup>
import {ref,getCurrentInstance} from 'vue'
import {Search,Delete} from '@element-plus/icons-vue'
import request from "../utils/request";
import {dateToString} from "../utils/dateToFormatString";


let tableData = ref([])
let pageNum = ref(1)
let pageSize = ref(5)
let pageTotal = ref(10)
const originFormLine = {
  username: '',
  nickname: '',
  email: '',
  pageParam:{
    pageNum:pageNum.value,
    pageSize:pageSize.value,
  }
}
let formInline = ref({
  username: '',
  nickname: '',
  email: '',
  startJoinTime: '',
  endJoinTime: '',
  pageParam:{
    pageNum:pageNum.value,
    pageSize:pageSize.value,
  }
})
const startTime = ref('')
const endTime = ref('')


//改变页码
const handleSizeChange = (val) => {
  formInline.value.pageParam.pageSize = val
  queryPageUserList()
}
//改变当前页
const handleCurrentChange = (val) => {
  formInline.value.pageParam.pageNum = val
  queryPageUserList()
}
//清空表单
const clearFormLine = () => {
  formInline.value = {...originFormLine}
  startTime.value = ''
  endTime.value = ''
}
//分页查询
const queryPageUserList = () => {
  if (startTime.value !== ''){
    formInline.value.startJoinTime = dateToString(new Date(startTime.value))
  }
  if (endTime.value !== ''){
    formInline.value.endJoinTime = dateToString(new Date(endTime.value))
  }
  console.log(formInline.value)
  request.post('/users/manage/page',formInline.value).then(res => {
    if (res.code === 1){
      tableData.value = res.data.records
      pageNum.value = res.data.current
      pageSize.value = res.data.size
      pageTotal.value = res.data.total
    }
  })
}
queryPageUserList()

</script>


<style scoped>
.el-dialog .el-input {
  width: 218px;

}

.demo-form-inline {
  margin-left: 25px;
}

.header {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 10px;
  display: flex;
}
</style>
